<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<div>
    <input type="text" placeholder="请输入数字1" id="num1">
</div>
<div>
    <input type="text" placeholder="请输入数字2" id="num2">
</div>
<div>
    <button onclick="calu('+')">加</button>
    <button onclick="calu('-')">减</button>
    <button onclick="calu('*')">乘</button>
    <button onclick="calu('/')">除</button>
</div>
<div>
    <h4>运算结果:&nbsp;<span></span></h4>
</div>
<script>
    function calu(o) {
        // 获取用户在输入框中输入的值 注意input的值存在value属性里 通过打点获取
        // getElementById('id值') 属于document的API
        let n1 = document.getElementById('num1').value;
        let n2 = document.getElementById('num2').value;
        console.log(typeof n1, typeof n2);
        // 输入框的数据类型为字符串类型 需要转为number数字类型
        // 即使将input标签的属性规定为number也会拿到字符串类型
        n1 = parseFloat(n1);
        n2 = parseFloat(n2);
        // isNaN(X) 用于判断X是否为非数字
        if (isNaN(n1) || isNaN(n2)) {
            alert('请输入数字!');
            return;
        }
        // querySelector('') 标签名选择器 document的API Selector: 选择器
        // 通过对应的选择器找到span元素
        let spanE = document.querySelector('span');
        console.log(spanE);
        switch (o) {
            case '+':
                // 通过`innerHTML`控制指定元素内的文本内容
                spanE.innerHTML = (n1 + n2);
                break;
            case '-':
                spanE.innerHTML = (n1 - n2);
                break;
            case '*':
                spanE.innerHTML = (n1 * n2);
                break;
            case '/':
                if (n2 != 0) {
                    spanE.innerHTML = (n1 / n2);
                    break;
                } else {
                    alert('除数不能为0,请重新输入!')
                }

        }
    }

</script>
</body>
</html>